<template>
  <div class="page">
    <div class="top">
      <div class="icon">
        <div class="left">
          <img src="../assets/icon/zhixiangzuo.svg" alt="" class="toLeft" />
        </div>
        <div class="middle">
          <img src="../assets/icon/yitaifang.svg" alt="" />
          <span>贖回 ETH</span>
        </div>
        <div class="right">
          <img src="../assets/icon/wentiguanli.svg" alt="" class="wenti" />
        </div>
      </div>
    </div>
    <div class="content">
      <div class="sl">贖回數量</div>
      <div class="inp">
        <input type="text" name="" id="" placeholder="最小值0.00000001" />
        <span class="WBETH">WBETH</span>
        <div class="zd">最大</div>
      </div>
      <div class="flex">
        <div class="left">可用保證金</div>
        <div class="right">0 WBETH</div>
      </div>
      <div class="flex">
        <div class="left">每日個人贖回額度</div>
        <div class="right">30 <span>/ 30</span></div>
      </div>
      <div class="flex">
        <div class="left">每日贖回限額</div>
        <div class="right">1,904.19230299 ETH</div>
      </div>

      <div class="bilv">
        <div class="flex">
          <div class="left">發放</div>
          <div class="right">
            <img
              src="../assets/icon/yitaifang.svg"
              alt=""
              style="margin-right: 5px"
            />
            0 ETH
          </div>
        </div>
        <div class="flex">
          <div class="left dashed">兌換比率</div>
          <div class="right">
            1 WBETH ≈ 1.02989252ETH
            <img
              src="../assets/icon/jiaohuan2.svg"
              alt=""
              style="margin-left: 5px"
            />
          </div>
        </div>
        <div class="flex">
          <div class="left">贖回天數</div>
          <div class="right">6 天</div>
        </div>
      </div>

      <div class="gc">
        <div class="tab">
          <div
            :class="{ item: true, active: type == 'gc' }"
            @click="setType('gc')"
          >
            過程
          </div>
          <div
            :class="{ item: true, active: type == 'cpgz' }"
            @click="setType('cpgz')"
          >
            產品規則
          </div>
        </div>

        <div class="rq" v-if="type == 'gc'">
          <div class="left">
            <div class="box white"></div>
            <div class="line white"></div>
            <div class="line"></div>
            <div class="box"></div>
          </div>
          <div class="right">
            <div class="la">
              <div class="left">贖回日期</div>
              <div class="right">2024-02-04 17:06</div>
            </div>
            <div class="la">
              <div class="left">ETH 分發日期</div>
              <div class="right">2024-02-10 08:00</div>
            </div>
          </div>
        </div>
        <div v-if="type == 'cpgz'"></div>
      </div>

      <div class="next">下一步</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "oneThree",
  data() {
    return { type: "gc" };
  },
  methods: {
    setType(type) {
      this.type = type;
    },
  },
};
</script>

<style scoped>
.content {
  position: relative;
  height: calc(100% - 50px);
}
.next {
  width: 100%;
  background-color: #434c5b;
  color: #616b7a;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  bottom: 30px;
  left: 0;
}
.rq > .right {
  flex: 1;
  font-size: 14px;
  margin-left: 5px;
}
.rq > .right .left {
  color: #8f95a1;
}
.rq > .right .right {
  color: #e8edf4;
}
.rq .right .la {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.rq {
  margin-top: 15px;
  display: flex;
}
.rq > .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-top: 5px; */
  transform: translateY(5px);
}
.rq .left .white {
  background-color: #e9eff2 !important;
}
.rq .left .box {
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background-color: #363c45;
}
.rq .left .line {
  width: 2px;
  height: 14px;
  background-color: #363c45;
}
.gc .tab {
  display: flex;
  align-items: center;
  color: #8f95a1;
  font-size: 14px;
  margin-top: 20px;
  border-bottom: 1px solid rgb(48, 53, 65);
}
.gc .tab .item {
  margin-right: 10px;
  padding-bottom: 5px;
}
.gc .tab .item.active {
  color: #e8edf4;
  border-bottom: 2px solid #e4b43d;
}
.dashed {
  padding-bottom: 3px;
  border-bottom: 1px dashed;
}
.bilv {
  border: 1px solid #353b44;
  border-radius: 10px;
  padding: 10px;
  padding-top: 0;
  margin-top: 20px;
}
.bilv .right {
  display: flex;
  align-items: center;
}
.bilv img {
  width: 15px;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-top: 10px;
}
.flex .left {
  color: #8f95a1;
}
.flex .right {
  color: #e8edf4;
}
.flex .right span {
  color: #8f95a1;
}
.sl {
  color: #8f95a1;
}
.WBETH {
  color: #fff;
  margin-right: 10px;
  font-size: 14px;
}
.zd {
  color: #c8c159;
}
.inp {
  display: flex;
  align-items: center;
  background-color: #333b48;
  height: 50px;
  border-radius: 10px;
  padding: 0 10px;
  margin: 6px 0;
  margin-bottom: 20px;
}
.inp .BETH {
  display: inline-block;
  margin: 0 10px 0 6px;
}
.inp img {
  width: 15px;
}
.inp input {
  background-color: transparent;
  border: none;
  height: 100%;
  width: 66%;
  color: #21262f;
}
.page {
  background-color: #21262f;
  padding: 0 20px;
  height: 100vh;
}
.top {
}
.top img {
  width: 20px;
}
.top .icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  color: #fff;
}
.top .icon .middle {
  display: flex;
  align-items: center;
}
.top .icon .middle img {
  margin-right: 5px;
}
</style>
